import './css/index.css'
import './css/prism.css'
import balloon from './images/balloon.png'
import logo from './images/logo.png'
import {FloatButton, Space} from "antd";
import {usePDF} from 'react-to-pdf'
import { SendOutlined } from '@ant-design/icons';
import {yearsAndMonthsBetweenDates} from "../../../utils/common.ts";
const Resume = () => {
    const date = new Date()
    const current = date.getFullYear()+'-'+(date.getMonth()+1)
    const {years,months} = yearsAndMonthsBetweenDates(new Date('2020-02'),new Date(current))
    const { toPDF, targetRef } = usePDF({filename: `前端开发工程师-${years}年.pdf`});
    const ages = date.getFullYear()-1997
    return (
        <div style={{height: '100%',overflow:'auto'}}>
            <FloatButton icon={<SendOutlined />} onClick={() => toPDF()} />
            <div id="resume" style={{margin: '0 auto'}} ref={targetRef}>
                <div className="balloon-wrap">
                    <img src={balloon} id="bg-balloon-small"/>
                    <img src={balloon} id="bg-balloon-large"/>
                    <img src={logo} id="bg-balloon-logo"/>
                </div>
                <div className="text-wrap">
                    <h2 style={{color: '#EF8C06'}}>求职意向: 前端开发工程师</h2>
                    <h4 className='text-title'>基本信息</h4>
                    <Space size="large">
                        <Space direction="vertical">
                            <div>姓名：谢浩</div>
                            <div>性别：男</div>
                        </Space>
                        <Space direction="vertical">
                            <div>年龄：{ages}岁</div>
                            <div>工作年限：{years}年{months}月</div>
                        </Space>
                        <Space direction="vertical">
                            <div>联系电话：18228436594</div>
                            <div>邮箱：1624577967@qq.com</div>
                        </Space>
                    </Space>
                    <h4 className='text-title'>教育背景</h4>
                    <Space size="large">
                        <Space direction="vertical">
                            <div>毕业院校：电子科技大学</div>
                            <div>学历：本科</div>
                            <div>专业：计算机科学与技术</div>
                            {/*<div>主修课程：C语言、计算机系统结构、数字逻辑设计及应用、软件工程、TCP/IP协议、计算机操作系统、数据库程序设计基础、面向对象程序设计</div>*/}
                        </Space>
                        {/*<Space direction="vertical">*/}
                        {/*    <div>毕业院校：四川工业科技学院</div>*/}
                        {/*    <div>学历：大专（全日制）</div>*/}
                        {/*    <div>专业：汽车运用于维修</div>*/}
                        {/*    <div>毕业时间：2019年</div>*/}
                        {/*</Space>*/}
                    </Space>
                    <h4 className='text-title'>专业技能</h4>
                    <div>
                        <Space direction="vertical">
                            <div className="prismatic">熟练掌握HTML5、CSS3，多个实际项目中（后台管理，H5）积累了丰富的布局和样式优化经验。</div>
                            <div className="prismatic">熟练掌握ES6+语法特性，擅长使用箭头函数、解构赋值、模板字符串等简化代码逻辑；熟练运用 Promise、Async/Await 进行高效且易于维护的异步编程。</div>
                            <div className="prismatic">深入理解Vue 2/3，React全家桶及相关生态技术，具备组件化开发和状态管理的实战经验，了解相关源码。</div>
                            <div className="prismatic">熟悉Node.js可基于Express、Egg框架，PostgreSQL、MySQL数据库开发后端项目，并且有实际项目经验。</div>
                            <div className="prismatic">深入理解HTML5开发，具备微信公众号应用的实际开发经验，熟练掌握微信开放平台的各类功能和服务。</div>
                            <div className="prismatic">熟练使用ECharts、AntV、DataV等可视化库的开发与应用，具备基于这些图形库进行二次封装及构建业务组件库的丰富经验。</div>
                            <div className="prismatic">深入理解浏览器渲染机制、页面性能优化、用户体验提升以及无障碍设计。</div>
                            {/*<div className="prismatic">熟悉css预处理器sass、less以及前端构建工具webpack和npm包管理库</div>*/}
                        </Space>
                    </div>
                    <h4 className='text-title'>工作经历</h4>
                    <div>
                        <Space direction="vertical" style={{width: '100%'}}>
                            <div className="fiveStars">
                                <div className="flex_space_around">
                                    {/*<div>2022.03-{current}</div>*/}
                                    <div>2022.03-至今</div>
                                    <div>成都知识视觉科技有限公司</div>
                                    <div>前端工程师</div>
                                </div>
                            </div>
                            <div className="prismatic">
                                项目管理与开发：
                                <ul>
                                    <li>主导多个微信公众号项目的前端开发，确保项目按时交付。</li>
                                    <li>负责项目搭建以及任务安排，开发时间评估</li>
                                    <li>组件式开发，提高工作效率，降低项目维护成本。</li>
                                    <li>解决复杂的技术难题，进行前沿技术调研，推动项目创新。</li>
                                </ul>
                            </div>
                            <div className="prismatic">
                                技术栈:
                                <ul>
                                    <li>熟练使用 Vue2、Vue3、React 和 TypeScript 进行高性能前端开发。</li>
                                    <li>应用现代前端框架和工具链（如 Webpack、Babel、vite）提升开发效率。</li>
                                    <li>熟悉响应式设计和跨浏览器兼容性，确保项目在多种设备上表现一致。</li>
                                </ul>
                            </div>
                            <div className="prismatic">
                                成就:
                                <ul>
                                    <li>成功上线多个微信公众号项目，用户反馈良好。</li>
                                    <li>优化前端性能，提升页面加载速度30%。</li>
                                </ul>
                            </div>
                            <div className="fiveStars">
                                <div className="flex_space_around">
                                    <div>2020.02-2022.03</div>
                                    <div>成都中光睿华科技有限公司</div>
                                    <div>前端工程师</div>
                                </div>
                            </div>
                            <div className="prismatic">
                                项目管理与开发:
                                <ul>
                                    <li>参与业务需求评审，确保项目按时交付。</li>
                                    <li>服从公司安排，多次前往偏远地区进行现场技术支持。</li>
                                    <li>负责工厂数据对接，设备安装及问题的解答与修复。</li>
                                </ul>
                            </div>
                            <div className="prismatic">
                                技术栈:
                                <ul>
                                    <li>使用 Vue.js、JavaScript、threeJs 进行前端开发。</li>
                                    <li>应用 RESTful API 进行后端数据交互。</li>
                                </ul>
                            </div>
                            <div className="prismatic">
                                成就:
                                <ul>
                                    <li>完成多个工厂数据对接项目，确保数据准确无误。</li>
                                    <li>提供现场技术支持，解决客户问题，提升客户满意度。</li>
                                </ul>
                            </div>
                        </Space>
                    </div>
                    <h4 className='text-title'>项目经验</h4>
                    <div>
                        <Space direction="vertical">
                            <div className="prismatic">临床科研平台(SaaS科研行业)</div>
                            <div className="prismatic">
                                项目描述：数愈智能临床科研工具平台为医学工作者在提出科学问题、解决科学问题和形成科研成果这三个关键阶段提供智能化科研工具。通过全流程科研能力支撑，大幅提升临床科研效率和成果转化成功率。
                            </div>
                            {/*<div className="prismatic">*/}
                            {/*    技术选型：采用 Vue 3 + Element Plus + TypeScript + Vite + Pinia 作为基本架构，集成 ChatGPT*/}
                            {/*    和文心一言的智能问答以及AIGC功能。*/}
                            {/*</div>*/}
                            <div className="prismatic">
                                技术选型：采用 React18 + Antd + TypeScript + Vite + Redux 作为基本架构，集成 ChatGPT
                                和文心一言的智能问答以及AIGC功能。
                            </div>
                            <div className="prismatic">
                                项目地址：<a href="https://www.kgcure.com" target="_blank">www.kgcure.com</a>
                            </div>
                            <div className="prismatic">
                                工作职责：
                                <ol>
                                    <li>使用原生 JavaScript 实现遮罩层画框截取并转换为图片的功能。</li>
                                    <li>利用 PDF.js 实现 PDF 文件的基础操作和高亮显示，解决文字渲染错误，优化 PDF
                                        加载速度和稳定性。
                                    </li>
                                    <li>通过 Node.js 对接 API，实现 ChatGPT 智能问答模块，完成 Prompt 的调研与实现。</li>
                                    <li>手写 Canvas 代码实现科研特定的泳道图和纳排流程图等复杂图形效果。</li>
                                    <li>设计灵活且高效的前端路由系统，并与后端团队紧密合作，定义了清晰、规范的 API
                                        接口，确保前后端数据交互的稳定性和扩展性。
                                    </li>
                                    <li>封装特定样式和功能的组件，复刻部分 ChatGPT 聊天界面及其核心功能。</li>
                                    <li>采用虚拟滚动技术优化大数据加载，显著提升性能和用户体验。</li>
                                    <li>优化图片为Base64格式，以减少图片加载时间并提升用户体验。同时，将相关资源打包为GZIP文件以进一步减少文件体积。</li>
                                </ol>
                            </div>
                            <div className="prismatic">智能医疗大数据处理平台（保险行业）</div>
                            <div
                                className="prismatic">项目描述：针对各大医疗机构的电子票、发票、病例、出院小结、检查报告、诊断书、身份证信息、协议理赔书、三方结算单、保单等文档，通过先进的大数据处理算法进行分析与整理，并将处理后的数据高效回传给医疗机构。
                            </div>
                            <div className="prismatic">技术选型：Vben Admin框架(内网环境)</div>
                            <div className="prismatic">工作职责：
                                <ol>
                                    <li>利用正则表达式和自定义校验逻辑，根据各第三方的具体要求对票据进行精准校验。</li>
                                    <li>采用BroadcastChannelAPI实现不同页面间的高效通信，确保实时更新案件详情及影像资料。</li>
                                    <li>集成OCR技术，通过OpenLayers库实现图像标注功能，增强数据输入的准确性和效率。</li>
                                    <li>基于HTML5拖放API设计并实现了图片分类与标签功能，同时支持复杂的表格操作。</li>
                                </ol>
                            </div>
                            <div className="prismatic">数愈健康（医疗行业）</div>
                            <div
                                className="prismatic">项目描述：数愈健康是一款集管理后台、微信公众号的产品销售平台，旨在为用户提供胶囊胃镜、益生菌产品的购买渠道。部分产品还涵盖了保险业务流程。微信公众号的部分功能已集成至第三方应用“藏宝图”中，以促进推广；同时，为第三方公司提供了后台管理功能，并实现了账号映射以支持免密码登录。
                            </div>
                            {/*<div style={{height: '20px'}}></div>*/}
                            <div className="prismatic">技术选型：采用Vue
                                2.x框架构建项目，包括VueRouter、Vuex等全套解决方案，确保了多个后台管理系统与客户端的高效开发与维护。
                            </div>
                            <div className="prismatic">项目地址：微信公众号 - 数愈健康（H5）</div>
                            <div className="prismatic">工作职责：
                                <ol>
                                    <li>实现了微信支付及聚合支付功能，并完善了支付失败后的处理机制，确保交易安全可靠。</li>
                                    <li>开发了微信定位、二维码和条形码扫描、产品分享等功能，解决了iOS与Android平台H5页面适配及显示差异的问题，提升了跨平台兼容性。</li>
                                    <li>利用腾讯地图Web服务API完成了药房地图导航功能，增强了用户的购物流程体验。</li>
                                    <li>实施了单点登录机制，优化了项目中的iframe内嵌处理逻辑，提高了系统的安全性与可用性。</li>
                                    <li>运用Canvas技术实现了PDF发票和协议的水印添加与预览功能，以及图片拖拽排序和复杂表格展示，显著改善了数据呈现的效果。</li>
                                    <li>对常用功能进行了封装，创建了可复用的组件和自定义指令，有效管理了按钮权限，简化了开发流程，提升了代码的可读性和维护性。</li>
                                </ol>
                            </div>
                            <div className="prismatic">炉台可视化（工厂行业）</div>
                            <div
                                className="prismatic">项目描述：该项目旨在实现工厂单晶硅炉台的操作及状态显示，通过可视化技术提高操作效率和监控精度。
                            </div>
                            <div className="prismatic">技术选型：采用Vue 2.x + DataV +
                                Three.js组合，构建高性能的可视化大屏应用。
                            </div>
                            <div className="prismatic">工作职责：
                                <ol>
                                    <li>使用Echarts和DataV库，设计并实现了可视化大屏的基础结构和样式，确保界面美观且信息清晰。</li>
                                    <li>利用Three.js的GLTFLoader加载炉台3D模型，通过调整position和rotation参数，实现炉台基础操作界面的高精度可视化。</li>
                                    <li>通过WebSocket技术实现实时数据传输，确保炉台状态的实时更新，提高了系统的响应速度和可靠性。</li>
                                    <li>优化了Three.js渲染性能，通过合理设置场景和相机参数，减少了渲染开销，提升了用户体验。</li>
                                    <li>实现了数据的本地缓存机制，即使在网络不稳定的情况下也能保证数据的连续性和完整性。</li>
                                    <li>采用了模块化和组件化的开发方式，提高了代码的可维护性和扩展性，便于后续功能的添加和修改。</li>
                                    <li>实施了严格的代码审查和测试流程，确保代码质量和系统稳定性。</li>
                                </ol>
                            </div>
                        </Space>
                    </div>
                    <h4 className='text-title'>自我评价</h4>
                    <div>
                        <Space direction="vertical">
                            <div className="prismatic">具有团队管理经验，拥有良好的团队协调能力，工作当中和同事融洽相处</div>
                            <div className="prismatic">常混迹于前端主流社区（github、掘金、知乎、gitee）</div>
                            <div className="prismatic">喜欢了解新技术，勇于探索新领域，对前端技术有高度的追求</div>
                            <div className="prismatic">热爱前端、思维活跃、学习能力强，抗压能力强。</div>
                            <div className="prismatic">性格随和、诚恳稳重、身体素质较好、能够很快地适应新环境。</div>
                        </Space>
                    </div>
                </div>

            </div>
        </div>

    )
}

export default Resume